<template>
    <div>
      <div>
        <div class="demo-fit">
          <div class="block">
            <el-avatar shape="square" :size="70" :fit="fits" :src="userInfo.userAvatar"></el-avatar>
            <div class="info">
              <div class="nickname">{{userInfo.nickName}}</div>
              <div class="id">{{'ID:'+userInfo.userId}}</div>
            </div>
          </div>
        </div>
        <div class="bg1"></div>
        <div class="userinfo" @click="toprofiles(userInfo.userId)">
          <i class="iconfont" style="font-size: 25px; color: #409EFF;">&#xe60b;</i>
          <div style="margin-left: 15px;color: black;">用户资料</div>
        </div>
        <div class="bg2"></div>
        <div class="userinfo" @click="tolunched(userInfo.userId)">
          <i class="iconfont" style="font-size: 25px;color: #F56C6C;">&#xe704;</i>
          <div style="margin-left: 15px;color: black;">我发布的活动</div>
        </div>
        <div class="userinfo" @click="topartner(userInfo.userId)">
          <i class="iconfont" style="font-size: 25px;color: #E6A23C;">&#xe628;</i>
          <div style="margin-left: 15px;color: black;">活动参与者</div>
        </div>
        <div class="userinfo" @click="tojoined(userInfo.userId)">
          <i class="iconfont" style="font-size: 25px;color: #E6A23C;">&#xe627;</i>
          <div style="margin-left: 15px;color: black;">我参与的活动</div>
        </div>
        <div class="userinfo" @click="tocollect(userInfo.userId)">
          <i class="iconfont" style="font-size: 25px;color: #DEE63C;">&#xe669;</i>
          <div style="margin-left: 15px;color: black;">我的收藏</div>
        </div>
        <div class="userinfo" @click="toappraise(userInfo.userId)">
          <i class="iconfont" style="font-size: 25px;color: #67C23A;">&#xe636;</i>
          <div style="margin-left: 15px;color: black;">评价管理</div>
        </div>
        <div class="userinfo" @click="centerDialogVisible = true">
          <i class="iconfont" style="font-size: 25px;color: red;">&#xe61e;</i>
          <div style="margin-left: 15px;color: black;">退出登录</div>
        </div>
      </div>
      <el-dialog
        title="提示"
        :visible.sync="centerDialogVisible"
        width="80%"
        center>
        <span>确定退出登录？</span>
        <span slot="footer" class="dialog-footer">
          <el-button type="danger" @click="logout">确 定</el-button>
          <el-button type="primary"@click="centerDialogVisible = false">取 消</el-button>
        </span>
      </el-dialog>

      <div>
        <footer>
          <el-row>
            <router-link to='/'>
              <el-col :span="6" class="el"><div class="grid-content iconfont"><span class="ico-info">&#xe603;</span></div></el-col>
            </router-link>
            <router-link to='/lunch'>
              <el-col :span="6" class="el"><div class="grid-content iconfont"><span class="ico-info">&#xe64d;</span></div></el-col>
            </router-link>
             <router-link to='/car'>
              <el-col :span="6" class="el"><div class="grid-content iconfont"><span class="ico-info">&#xe65e;</span></div></el-col>
            </router-link>
            <router-link to='/user'>
              <el-col :span="6" class="el"><div class="grid-content iconfont bg-blue"><span class="ico-info">&#xe602;</span></div></el-col>
            </router-link>
          </el-row>
        </footer>
        <!-- <div style="height: 47px"></div> -->
      </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    name: 'User',
    data() {
      return {
        fits: 'contain',
        userInfo: {},
        userId: '',
        islogin: '',
        centerDialogVisible: false
      }
    },
    methods: {
      logout() {
        this.centerDialogVisible = false;
        window.localStorage.removeItem('mine_dates');
        this.$router.push('/')
      },
      toprofiles(userId) {
        this.$router.push('/profiles/'+userId)
      },
      tolunched(userId) {
        this.$router.push('/lunchedlist/'+userId)
      },
      topartner(userId) {
        this.$router.push('/partner/'+userId)
      },
      tojoined(userId) {
        this.$router.push('/joinedlist/'+userId)
      },
      tocollect(userId) {
        this.$router.push('/collect/'+userId)
      },
      toappraise(userId) {
        this.$router.push('/appraise/'+userId)
      },
      getHomeInfo () {
          axios.get('/static/mock/userinfo.json')
              .then(this.getHomeInfoSucc)
      },
      getHomeInfoSucc (res) {
          res = res.data
          if (res.ret && res.data) {
              const data = res.data
              this.userInfo = data.user
          }else {
              alert('数据获取失败')
          }
          console.log(res)
      },
      // getlocaliInfo () {
      //   let content = JSON.parse(localStorage.getItem('矿且有约登录'))
      //   if(content == "" || content == null) {
      //     this.islogin = false
      //   }else {
      //     this.islogin = true
      //   }
      // }
    },
    mounted () {
        this.getHomeInfo();
    }
}
</script>

<style scoped>
    footer {
      position:fixed;
      bottom:0;
      z-index:9999;
      height: 41px;
      width: 100%;
      background-color: white;
      border-top: 1px solid #eee;
    }
    .el {
      color: black;
    }
    .grid-content {
      text-align: center;
      height: 41px;
      font-size: 30px;
      padding: 3px;
    }
    .ico-info {
      vertical-align: middle;
    }
    .bg-blue {
      color: #409EFF;
    }
    .block {
      display: flex;
      margin-left: 20px;
      margin-top: 25px;
    }
    .info {
      flex-direction:column;
      align-items: center;
    }
    .info1 {
      display: flex;
      flex-direction:column;
      align-items: center;
    }
    .nickname1 {
      display: flex;
      align-items: center;
      height: 70px;
      width: 150px;
      padding: 0 0 0 20px;
      font-size: 20px;
      color: #303133;
    }
    .nickname {
      display: flex;
      align-items: center;
      height: 32.5px;
      width: 150px;
      padding: 0 0 0 20px;
    }
    .id {
      display: flex;
      align-items: center;
      height: 32.5px;
      width: 150px;
      padding: 0 0 0 20px;
      font-size: 12px;
      color: #C0C4CC
    }
    .bg1 {
      margin-top: 25px;
      height: 7px;
      background-color: #E4E7ED;
    }
    .bg2 {
      height: 7px;
      background-color: #E4E7ED;
    }
    .userinfo {
      display: flex;
      align-items: center;
      height: 40px;
      padding: 0 0 0 10px;
      border-bottom: 1px solid #eee
    }
</style>